<template>
  <div class="document-container">
    <div class="content">
      <!-- 概览页面 -->
      <transition name="fade-slide" mode="out-in">
        <div v-if="!showDocDetail" class="overview">
          <h2 class="page-title">系统介绍</h2>
          <el-divider />
          <div class="flex justify-between items-center">
            <p class="description">
              河南农业大学人员组织管理系统是一个现代化的人员管理平台，旨在提供高效、便捷的人员组织管理解决方案。
              系统采用最新的技术栈开发，具有良好的用户体验和强大的功能特性。
            </p>
            <el-button
              v-if="hasAddPermission"
              type="primary"
              @click="handleAddDoc"
            >
              <el-icon class="mr-1"><Plus /></el-icon>新增文档
            </el-button>
          </div>

          <h3 class="section-title">核心功能</h3>
          <div class="feature-list">
            <el-card
              v-for="doc in documentList"
              :key="doc.id"
              class="feature-card"
              shadow="hover"
              @click="showFeatureDoc(doc)"
            >
              <div class="feature-icon">
                <el-icon>
                  <component :is="doc.icon" />
                </el-icon>
              </div>
              <h4 class="feature-title">{{ doc.title }}</h4>
              <p class="feature-desc">{{ doc.description }}</p>
              <div class="feature-action">
                <el-button type="primary" text>
                  查看文档
                  <el-icon class="el-icon--right"><ArrowRight /></el-icon>
                </el-button>
              </div>
            </el-card>
          </div>
        </div>

        <!-- 文档详情页面 -->
        <div v-else class="doc-detail">
          <div class="doc-header">
            <el-button link @click="showDocDetail = false">
              <el-icon><ArrowLeft /></el-icon>
              返回
            </el-button>
            <h2>{{ currentDoc.title }}</h2>
            <div class="header-actions">
              <el-button v-if="!isEditing" type="primary" @click="exportToWord">
                <template #icon>
                  <el-icon><Document /></el-icon>
                </template>
                导出Word
              </el-button>
              <el-button
                v-if="hasEditPermission"
                type="primary"
                @click="toggleEdit"
              >
                <template #icon>
                  <el-icon>
                    <Edit v-if="!isEditing" />
                    <Check v-else />
                  </el-icon>
                </template>
                {{ isEditing ? "保存" : "编辑" }}
              </el-button>
              <el-button v-if="isEditing" @click="cancelEdit">
                <template #icon>
                  <el-icon><Close /></el-icon>
                </template>
                取消
              </el-button>
            </div>
          </div>
          <el-divider />

          <div class="doc-container">
            <!-- 左侧内容区 -->
            <div class="doc-content-wrapper">
              <!-- 编辑模式 -->
              <div v-if="isEditing" class="editor-container">
                <el-form :model="editForm" label-position="top">
                  <el-form-item label="标题">
                    <el-input v-model="editForm.title" />
                  </el-form-item>
                  <el-form-item label="内容">
                    <div class="editor-wrapper">
                      <Toolbar
                        style="border-bottom: 1px solid #ccc"
                        :editor="editorRef"
                        :defaultConfig="toolbarConfig"
                        mode="default"
                      />
                      <Editor
                        v-model="editForm.content"
                        style="overflow-y: hidden"
                        :defaultConfig="editorConfig"
                        mode="default"
                        @onCreated="handleCreated"
                      />
                    </div>
                  </el-form-item>
                </el-form>
              </div>

              <!-- 查看模式 -->
              <div v-else class="doc-content">
                <Editor
                  :model-value="currentDoc.content"
                  style="
                    height: auto;
                    min-height: 500px;
                    background: transparent;
                  "
                  :default-config="{
                    readOnly: true,
                    placeholder: ''
                  }"
                  mode="simple"
                  class="view-mode-editor"
                  @onCreated="handleViewerCreated"
                />
              </div>
            </div>

            <!-- 右侧目录导航 -->
            <div v-if="!isEditing" class="doc-catalog">
              <div class="catalog-title">目录</div>
              <div class="catalog-list">
                <div
                  v-for="(item, index) in catalogItems"
                  :key="index"
                  class="catalog-item"
                  :class="[
                    `level-${item.level}`,
                    { active: currentSection === item.id }
                  ]"
                  @click="scrollToSection(item.id)"
                >
                  {{ item.title }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  shallowRef,
  onBeforeUnmount,
  onMounted,
  computed,
  nextTick
} from "vue";
import {
  User,
  Setting,
  Lock,
  ArrowRight,
  ArrowLeft,
  Edit,
  Check,
  Close,
  Plus,
  Management,
  Key,
  Tools,
  Document,
  UserFilled,
  List,
  Download
} from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import {
  getHelpDocumentList,
  updateHelpDocument,
  addHelpDocument,
  getMyPermissions
} from "@/api";
import html2pdf from "html2pdf.js";
import {
  Document as DocxDocument,
  Packer,
  Paragraph,
  TextRun,
  ImageRun
} from "docx";
import { saveAs } from "file-saver";

// 添加类型定义
interface DocumentType {
  id: string;
  title: string;
  content: string;
  status: string;
  title_content?: string;
  icon?: any;
  description?: string;
}

const showDocDetail = ref(false);
const isEditing = ref(false);
const currentDoc = ref<DocumentType>({
  id: "",
  title: "",
  content: "",
  status: ""
});

// 文档列表
const documentList = ref<DocumentType[]>([]);

// 添加权限相关的变量
const permissions = ref<string[]>([]);

// 权限判断计算属性
const hasAddPermission = computed(() =>
  permissions.value.includes("system.help.add")
);
const hasEditPermission = computed(() =>
  permissions.value.includes("system.help.set")
);

// 获取权限列表
const fetchPermissions = async () => {
  try {
    const res = await getMyPermissions();
    if (res.status === "success") {
      permissions.value = res.data.map(item => item.name);
    }
  } catch (error) {
    console.error("获取权限失败:", error);
    ElMessage.error("获取权限失败");
  }
};

// 获取文档列表
const fetchDocumentList = async () => {
  try {
    const response = await getHelpDocumentList({
      page: 1,
      size: 10
    });

    if (response.status === "success" && response.data.records.length > 0) {
      documentList.value = response.data.records.map(doc => ({
        title: doc.title,
        description: doc.title_content || "系统功能说明文档",
        icon: getIconByTitle(doc.title),
        id: doc.id,
        status: doc.status,
        content: doc.content
      }));
    }
  } catch (error) {
    console.error("获取文档列表失败:", error);
    ElMessage.error("获取文档列表失败");
  }
};

// 根据标题获取对应的图标
const getIconByTitle = (title: string) => {
  switch (title) {
    case "人员管理":
      return User;
    case "组织架构":
      return Setting;
    case "角色管理":
      return UserFilled;
    case "管理员管理":
      return Management;
    case "权限管理":
      return Key;
    case "系统设置":
      return Tools;
    case "日志管理":
      return Document;
    case "数据管理":
      return List;
    case "用户管理":
      return UserFilled;
    default:
      return Setting;
  }
};

// 组件挂载时获取文档列表
onMounted(async () => {
  await fetchPermissions(); // 先获取权限
  await fetchDocumentList(); // 再获取文档列表
});

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

const editForm = reactive({
  title: "",
  content: ""
});

// 编辑器配置
const editorConfig = {
  placeholder: "请输入内容...",
  autoFocus: false,
  MENU_CONF: {
    // 配置每一个菜单项
    uploadImage: {
      server: "/api/upload", // 上传图片的接口
      fieldName: "file" // 上传图片的字段名
    }
  },
  // 编辑器内容样式
  customStyle: {
    paddingTop: "10px",
    paddingBottom: "10px"
  },
  // 禁用回车自动创建段落
  ENTER_TO_CREATE_P: false,
  // 粘贴时保持原始格式
  pasteFilterStyle: false,
  pasteIgnoreImg: true,
  // 禁用自动插入空行
  autoNewLine: false,
  // 设置默认段落
  defaultContent: [{ type: "paragraph", children: [{ text: "" }] }],
  // 禁用自动格式化
  autoFormat: false
};

// 工具栏配置
const toolbarConfig = {
  toolbarKeys: [
    "headerSelect",
    "bold",
    "italic",
    "underline",
    "through",
    "color",
    "bgColor",
    "|",
    "bulletedList",
    "numberedList",
    "todo",
    "|",
    "insertLink",
    "insertTable",
    "codeBlock",
    "|",
    "undo",
    "redo"
  ],
  insertKeys: {
    index: 0,
    keys: [] // 去掉默认插入的按钮
  }
};

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor) {
    editor.destroy();
  }
  editorRef.value = null;
  window.removeEventListener("scroll", handleScroll);
});

// 开始编辑
const startEdit = () => {
  editForm.title = currentDoc.value.title;
  editForm.content = currentDoc.value.content;
  isEditing.value = true;
};

// 获取帮助文档内容
const fetchHelpDocument = async (keyword: string) => {
  try {
    const response = await getHelpDocumentList({
      keyword,
      page: 1,
      size: 10
    });

    if (response.status === "success" && response.data.records.length > 0) {
      const doc = response.data.records[0];
      currentDoc.value = {
        id: doc.id,
        title: doc.title,
        content: doc.content,
        status: doc.status
      };
      showDocDetail.value = true;
      isEditing.value = false;
    } else {
      ElMessage.warning("未找到相关文档");
    }
  } catch (error) {
    console.error("获取文档失败:", error);
    ElMessage.error("获取文档失败");
  }
};

// 添加新增文章相关变量和方法
const handleAddDoc = () => {
  if (!hasAddPermission.value) {
    ElMessage.warning("您没有新增权限");
    return;
  }

  currentDoc.value = {
    id: "",
    title: "",
    content: "",
    status: "display"
  };
  editForm.title = "";
  editForm.content = "";
  showDocDetail.value = true;
  isEditing.value = true;
};

// 修改保存编辑方法
const saveEdit = async () => {
  try {
    const isNewDoc = !currentDoc.value.id;
    const apiMethod = isNewDoc ? addHelpDocument : updateHelpDocument;
    const params: DocumentType = {
      id: currentDoc.value.id,
      title: editForm.title,
      content: editForm.content,
      status: currentDoc.value.status || "display"
    };

    // 调用接口
    const res = await apiMethod(params);

    if (res.status === "success") {
      // 更新当前文档内容
      currentDoc.value = {
        ...currentDoc.value,
        id: res.data?.id || currentDoc.value.id,
        title: editForm.title,
        content: editForm.content
      };

      isEditing.value = false;
      ElMessage.success(isNewDoc ? "新增成功" : "保存成功");

      // 刷新文档列表
      fetchDocumentList();
    } else {
      throw new Error(res.message || (isNewDoc ? "新增失败" : "保存失败"));
    }
  } catch (error) {
    console.error("保存失败:", error);
    ElMessage.error(error.message || "保存失败");
  }
};

// 取消编辑
const cancelEdit = () => {
  if (editorRef.value) {
    editorRef.value.destroy();
    editorRef.value = null;
  }
  isEditing.value = false;
  ElMessage.info("已取消编辑");
};

// 切换编辑状态
const toggleEdit = () => {
  if (!hasEditPermission.value) {
    ElMessage.warning("您没有编辑权限");
    return;
  }

  if (isEditing.value) {
    saveEdit();
  } else {
    if (editorRef.value) {
      editorRef.value.destroy();
      editorRef.value = null;
    }
    startEdit();
  }
};

// 编辑器创建完成时的回调
const handleCreated = (editor: any) => {
  if (editorRef.value) {
    editorRef.value.destroy();
  }
  editorRef.value = editor;
  // 设置编辑器默认配置
  editor.getConfig().customPaste = (editor: any, event: any) => {
    const html = event.clipboardData.getData("text/html");
    if (html) {
      // 粘贴 HTML 内容时的处理，去除多余空行
      const cleanHtml = html.replace(/(<p><br><\/p>)+/g, "");
      editor.dangerouslyInsertHtml(cleanHtml);
    } else {
      // 粘贴纯文本时的处理
      const text = event.clipboardData.getData("text/plain");
      if (text) {
        // 去除多余空行后插入
        const cleanText = text.replace(/\n\s*\n/g, "\n");
        editor.insertText(cleanText);
      }
    }
    return false; // 阻止默认粘贴行为
  };
};

// 修改 showFeatureDoc 函数，直接使用已获取的内容
const showFeatureDoc = async doc => {
  currentDoc.value = {
    id: doc.id,
    title: doc.title,
    content: doc.content,
    status: doc.status
  };
  showDocDetail.value = true;
  isEditing.value = false;
};

// 目录相关的数据
const catalogItems = ref([]);
const currentSection = ref("");

// 处理文档查看器创建完成的回调
const handleViewerCreated = async editor => {
  if (editorRef.value) {
    editorRef.value.destroy();
  }
  editorRef.value = editor;
  await nextTick();
  // 解析文档内容，生成目录
  generateCatalog();
};

// 生成目录
const generateCatalog = () => {
  const content = document.querySelector(".view-mode-editor");
  if (!content) return;

  const headings = content.querySelectorAll("h1, h2, h3");
  const items = [];

  headings.forEach((heading, index) => {
    // 为每个标题添加唯一ID
    const id = `heading-${index}`;
    heading.id = id;

    items.push({
      id,
      title: heading.textContent,
      level: parseInt(heading.tagName.charAt(1)),
      element: heading
    });
  });

  catalogItems.value = items;
};

// 滚动到指定章节
const scrollToSection = id => {
  const element = document.getElementById(id);
  if (element) {
    element.scrollIntoView({ behavior: "smooth" });
    currentSection.value = id;
  }
};

// 监听滚动，更新当前章节
const handleScroll = () => {
  const scrollPosition = window.scrollY;

  for (const item of catalogItems.value) {
    const element = document.getElementById(item.id);
    if (element) {
      const { top } = element.getBoundingClientRect();
      if (top <= 100) {
        currentSection.value = item.id;
      }
    }
  }
};

// 组件挂载时添加滚动监听
onMounted(() => {
  window.addEventListener("scroll", handleScroll);
});

// 组件卸载时移除滚动监听
onBeforeUnmount(() => {
  window.removeEventListener("scroll", handleScroll);
});

// 添加导出PDF方法
const exportToPDF = () => {
  const element = document.querySelector(".doc-content");
  if (!element) {
    ElMessage.error("未找到要导出的内容");
    return;
  }

  const opt = {
    margin: [10, 10],
    filename: `${currentDoc.value.title || "文档"}.pdf`,
    image: { type: "jpeg", quality: 0.98 },
    html2canvas: { scale: 2, useCORS: true },
    jsPDF: { unit: "mm", format: "a4", orientation: "portrait" }
  };

  ElMessage.info("正在生成PDF，请稍候...");

  html2pdf()
    .from(element)
    .set(opt)
    .save()
    .then(() => {
      ElMessage.success("PDF导出成功");
    })
    .catch(err => {
      console.error("PDF导出失败:", err);
      ElMessage.error("PDF导出失败");
    });
};

// 添加导出Word方法
const exportToWord = async () => {
  try {
    const content = document.querySelector(".doc-content");
    if (!content) {
      ElMessage.error("未找到要导出的内容");
      return;
    }

    ElMessage.info("正在生成Word文档，请稍候...");

    // 创建文档段落数组
    const children = [];

    // 添加标题
    children.push(
      new Paragraph({
        children: [
          new TextRun({
            text: currentDoc.value.title,
            bold: true,
            size: 32
          })
        ]
      })
    );

    // 获取所有段落和图片
    const elements = Array.from(
      content.querySelectorAll("p, img, h1, h2, h3, h4, h5, h6")
    );

    // 处理每个元素
    for (const element of elements) {
      if (element.tagName.toLowerCase() === "img") {
        try {
          // 处理图片
          const imgElement = element as HTMLImageElement;
          const imgUrl = imgElement.src;
          const imgResponse = await fetch(imgUrl);
          const imgBuffer = await imgResponse.arrayBuffer();

          // 获取图片原始尺寸
          const naturalWidth = imgElement.naturalWidth;
          const naturalHeight = imgElement.naturalHeight;

          // 计算合适的显示尺寸
          const maxWidth = 600; // 最大宽度（可以根据需要调整）
          let width = naturalWidth;
          let height = naturalHeight;

          // 如果图片宽度超过最大宽度，按比例缩放
          if (width > maxWidth) {
            const ratio = maxWidth / width;
            width = maxWidth;
            height = Math.round(height * ratio);
          }

          children.push(
            new Paragraph({
              children: [
                new ImageRun({
                  data: imgBuffer,
                  transformation: {
                    width,
                    height
                  },
                  type: "png"
                })
              ]
            })
          );
        } catch (error) {
          console.error("图片处理失败:", error);
          // 如果图片加载失败，添加提示文本
          children.push(
            new Paragraph({
              children: [
                new TextRun({
                  text: "[图片加载失败]",
                  color: "FF0000"
                })
              ]
            })
          );
        }
      } else {
        // 处理标题
        if (element.tagName.match(/^h[1-6]$/i)) {
          children.push(
            new Paragraph({
              children: [
                new TextRun({
                  text: element.textContent || "",
                  bold: true,
                  size: 28 - (parseInt(element.tagName[1]) - 1) * 2
                })
              ]
            })
          );
        } else {
          // 处理普通段落
          children.push(
            new Paragraph({
              children: [
                new TextRun({
                  text: element.textContent || "",
                  size: 24
                })
              ]
            })
          );
        }
      }
    }

    // 创建文档
    const doc = new DocxDocument({
      sections: [
        {
          properties: {},
          children: children
        }
      ]
    });

    // 生成文档
    const buffer = await Packer.toBlob(doc);

    // 保存文件
    saveAs(buffer, `${currentDoc.value.title || "文档"}.docx`);

    ElMessage.success("Word文档导出成功");
  } catch (err) {
    console.error("Word导出失败:", err);
    ElMessage.error("Word导出失败，请稍后重试");
  }
};
</script>

<style scoped>
@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-15px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes content-fade-in {
  from {
    opacity: 0;
    transform: translateY(15px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes element-slide-in {
  from {
    opacity: 0;
    transform: translateX(15px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes editor-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes wrapper-fade-in {
  from {
    opacity: 0;
    transform: scale(0.98);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes grid-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes doc-fade-in {
  from {
    opacity: 0;
    transform: scale(0.98);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 响应式布局 */
@media screen and (width <= 1200px) {
  .feature-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .content {
    padding: 24px;
  }
}

@media screen and (width <= 768px) {
  .document-container {
    padding: 16px;
  }

  .content {
    padding: 20px;
  }

  .page-title {
    font-size: 28px;
  }

  .section-title {
    margin: 36px 0 24px;
    font-size: 22px;
  }

  .description {
    font-size: 15px;
  }

  .doc-content,
  .editor-container {
    padding: 24px;
  }

  .feature-list {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .feature-card {
    padding: 24px;
  }

  .doc-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    padding: 16px;
  }

  .doc-header h2 {
    font-size: 24px;
  }

  .header-actions {
    justify-content: flex-end;
    width: 100%;
  }
}

/* 响应式布局调整 */
@media screen and (width <= 1200px) {
  .doc-catalog {
    width: 220px;
  }
}

@media screen and (width <= 992px) {
  .doc-container {
    flex-direction: column;
  }

  .doc-catalog {
    position: static;
    width: 100%;
    max-height: none;
  }
}

/* 页面切换动效 */
.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-slide-enter-from {
  opacity: 0;
  transform: translateX(20px);
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateX(-20px);
}

/* 基础布局 */
.document-container {
  width: 100%;
  min-height: 100vh;
  padding: 24px;
  background-color: var(--el-bg-color-page, #f5f7fa);
}

.content {
  max-width: 1400px;
  padding: 32px;
  margin: 0 auto;
  backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgb(0 0 0 / 5%);
  transition: all 0.3s ease;
}

/* 标题和描述 */
.page-title {
  margin: 0 0 24px;
  font-size: 36px;
  font-weight: 800;
  color: var(--el-text-color-primary);
  letter-spacing: -0.5px;
  background: linear-gradient(
    120deg,
    var(--el-color-primary) 0%,
    var(--el-color-primary-light-3) 100%
  );
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fade-in 0.4s ease-out;
}

.section-title {
  position: relative;
  padding-left: 16px;
  margin: 48px 0 32px;
  font-size: 28px;
  font-weight: 700;
  color: var(--el-text-color-primary);
  letter-spacing: -0.3px;
}

.section-title::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 4px;
  height: 24px;
  content: "";
  background: var(--el-color-primary);
  border-radius: 4px;
  transform: translateY(-50%);
}

.description {
  max-width: 800px;
  margin: 24px 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--el-text-color-regular);
  animation: slide-in 0.3s ease-out;
}

/* 功能卡片列表 */
.feature-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 32px;
  animation: grid-fade-in 0.4s ease-out;
}

.feature-card {
  position: relative;
  height: 100%;
  padding: 32px;
  overflow: hidden;
  cursor: pointer;
  background-color: var(--el-bg-color);
  backdrop-filter: blur(8px);
  border: 1px solid var(--el-border-color-light);
  border-radius: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  content: "";
  background: linear-gradient(
    90deg,
    var(--el-color-primary) 0%,
    var(--el-color-primary-light-3) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.feature-card:hover {
  border-color: var(--el-color-primary-light-5);
  box-shadow: 0 20px 40px -20px rgba(var(--el-color-primary-rgb), 0.15);
  transform: translateY(-8px) scale(1.02);
}

.feature-card:hover::before {
  opacity: 1;
}

/* 功能卡片图标 */
.feature-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  margin-bottom: 24px;
}

.feature-icon::after {
  position: absolute;
  z-index: 0;
  width: 48px;
  height: 48px;
  content: "";
  background: var(--el-color-primary-light-9);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.2s ease;
  transform: scale(0.8);
}

.feature-card:hover .feature-icon::after {
  opacity: 1;
  transform: scale(1.2);
}

.feature-icon .el-icon {
  z-index: 1;
  font-size: 56px;
  color: var(--el-color-primary);
  transition: all 0.3s ease;
}

.feature-card:hover .feature-icon .el-icon {
  filter: drop-shadow(0 4px 6px rgba(var(--el-color-primary-rgb), 0.2));
  transform: scale(1.1) rotate(5deg);
}

/* 功能卡片文本 */
.feature-title {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  text-align: center;
  transition: color 0.3s ease;
}

.feature-card:hover .feature-title {
  color: var(--el-color-primary);
}

.feature-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--el-text-color-secondary);
  text-align: center;
  transition: all 0.3s ease;
}

.feature-card:hover .feature-desc {
  color: var(--el-text-color-primary);
}

.feature-action {
  margin-top: 24px;
  text-align: center;
  opacity: 0;
  transition: all 0.3s ease;
  transform: translateY(10px);
}

.feature-card:hover .feature-action {
  opacity: 1;
  transform: translateY(0);
}

/* 文档详情 */
.doc-detail {
  animation: doc-fade-in 0.4s ease-out;
}

.doc-header {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  margin-bottom: 24px;
  background: var(--el-bg-color);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgb(0 0 0 / 4%);
  transition: all 0.3s ease;
  animation: slide-down 0.3s ease-out;
}

.doc-header:hover {
  box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
}

.doc-header h2 {
  flex: 1;
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  color: var(--el-text-color-primary);
  transition: color 0.3s ease;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.header-actions .el-button {
  transition: all 0.2s ease;
}

.header-actions .el-button:hover {
  box-shadow: 0 4px 12px rgba(var(--el-color-primary-rgb), 0.2);
  transform: translateY(-2px);
}

.header-actions .el-button .el-icon {
  margin-right: 4px;
  font-size: 16px;
}

/* 文档内容 */
.doc-content {
  width: 100%;
  max-width: 1400px;
  padding: 40px;
  margin: 0 auto;
  background: var(--el-bg-color);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgb(0 0 0 / 5%);
  animation: content-fade-in 0.4s ease-out 0.1s both;
}

.doc-content :deep(h3),
.doc-content :deep(h4),
.doc-content :deep(h5),
.doc-content :deep(p),
.doc-content :deep(ul) {
  opacity: 0;
  animation: element-slide-in 0.3s ease-out forwards;
}

.doc-content :deep(h1) {
  color: var(--el-text-color-primary);
  letter-spacing: -0.3px;
}

.doc-content :deep(h2) {
  color: var(--el-text-color-primary);
  letter-spacing: -0.3px;
}

.doc-content :deep(h3) {
  padding-bottom: 12px;
  margin: 32px 0 24px;
  font-size: 24px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  letter-spacing: -0.3px;
  border-bottom: 2px solid var(--el-color-primary-light-7);
  animation-delay: 0.15s;
}

.doc-content :deep(h4) {
  margin: 28px 0 20px;
  font-size: 20px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  letter-spacing: -0.2px;
  animation-delay: 0.2s;
}

.doc-content :deep(h5) {
  margin: 24px 0 16px;
  font-size: 18px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  animation-delay: 0.25s;
}

.doc-content :deep(p) {
  margin: 16px 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--el-text-color-primary);
  animation-delay: 0.3s;
}

.doc-content :deep(ul) {
  padding-left: 28px;
  margin: 16px 0;
  animation-delay: 0.35s;
}

.doc-content :deep(li) {
  position: relative;
  margin: 10px 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--el-text-color-primary);
}

.doc-content :deep(li)::before {
  position: absolute;
  top: 10px;
  left: -18px;
  width: 6px;
  height: 6px;
  content: "";
  background-color: var(--el-color-primary);
  border-radius: 50%;
}

/* 编辑器 */
.editor-container {
  width: 100%;
  max-width: 100%;
  padding: 24px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgb(0 0 0 / 5%);
  animation: editor-fade-in 0.4s ease-out;
}

.editor-container .el-form-item {
  margin-bottom: 24px;
}

.editor-container .el-input {
  width: 100%;
}

.editor-wrapper {
  width: calc(100% + 48px);
  margin: 0 -24px;
  overflow: hidden;
  border: 1px solid var(--el-border-color);
  border-radius: 8px;
  opacity: 0;
  animation: wrapper-fade-in 0.4s ease-out 0.2s forwards;
}

.editor-wrapper :deep(.w-e-text-container) {
  background-color: #fff;
}

.editor-wrapper :deep(.w-e-toolbar) {
  padding: 8px 16px;
  background-color: var(--el-bg-color-page);
  border-bottom: 1px solid var(--el-border-color);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.editor-wrapper :deep(.w-e-text-container [data-slate-editor]) {
  height: auto;
  min-height: 500px;
  padding: 24px 32px;
}

.editor-wrapper :deep(.w-e-panel-content) {
  max-width: 100%;
}

/* 查看模式编辑器样式 */
.view-mode-editor :deep(.w-e-text-container) {
  background-color: transparent !important;
  border: none !important;
}

.view-mode-editor :deep([data-slate-editor]) {
  padding: 0 !important;
}

/* 动画定义 */

/* 添加目录相关样式 */
.doc-container {
  display: flex;
  gap: 32px;
}

.doc-content-wrapper {
  flex: 1;
  min-width: 0;
}

.doc-catalog {
  position: sticky;
  top: 24px;
  width: 260px;
  max-height: calc(100vh - 48px);
  padding: 20px;
  overflow-y: auto;
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color-light);
  border-radius: 8px;
}

.catalog-title {
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.catalog-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.catalog-item {
  padding: 8px 12px;
  font-size: 14px;
  color: var(--el-text-color-regular);
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.catalog-item:hover {
  color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
}

.catalog-item.active {
  color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
}

.level-1 {
  font-weight: 600;
}

.level-2 {
  padding-left: 24px;
}

.level-3 {
  padding-left: 36px;
  font-size: 13px;
}
</style>
